import React, { Component, Fragment } from "react";
import Link from "next/link";
import Layout from "../components/layout/MyLayout";
import { Button, Avatar } from "antd";
import axios from "axios";
import classnames from "classnames";
import uuid from "react-uuid";

interface IProps {
  router: object;
  shows: [];
  homeStore: object;
}

interface IState {
  loading: boolean;
  loadingMore: boolean;
  hasMore: boolean;
  active: string;
}

interface IItem {
  id: number;
  url: string;
  name: string;
  summary: string;
  premiered: string;
  image: {
    medium: string;
    original: string;
  };
}

class Books extends Component<IProps, IState> {
  static async getInitialProps() {
    const res: { data: any[] } = await axios.get("https://api.tvmaze.com/search/shows?q=batman");
    const data = res.data;
    return {
      shows: data.map((item: { show: object }): object => item.show)
    };
  }

  public state = {
    loading: true,
    active: "hot", // hot or new
    loadingMore: false,
    hasMore: true
  };

  componentDidMount() {
    if (this.props && this.props.shows) {
      this.setState({
        loading: false
      });
    }
  }

  public changeActive(active: string) {
    this.setState({
      active
    });
  }

  render() {
    const { shows } = this.props;
    return (
      <Layout>
        <div>
          <div className="books-banner">
            <img src="/static/images/banner.jpg" alt="banner" />
          </div>
          <div className="books">
            <div className="books-left">
              <div className="left-home-order">
                <span
                  onClick={() => this.changeActive("hot")}
                  className={classnames({ active: this.state.active === "hot" })}
                >
                  推荐书籍
                </span>
                <i className="line"></i>
                <span
                  onClick={() => this.changeActive("new")}
                  className={classnames({ active: this.state.active === "new" })}
                >
                  我购买的书籍
                </span>
              </div>
              <ul className="books-list">
                {shows.map((item: IItem) => {
                  return (
                    <Fragment key={uuid()}>
                      <Link href={`/book/${item.id}`}>
                        <li className="books-item">
                          <div className="books-item-left">
                            <img
                              src=""
                              alt=""
                            />
                          </div>
                          <div className="books-item-right">
                            <div className="books-item-name">我未完成的问题</div>
                            <div className="books-item-desc">
                              通过实践快速上手 SwiftUI 及 Combine 响应式编程框架，掌握下一代客户端 UI 开发技术。 WWDC
                              2019 上 Apple 公布了声明式全新界面框架 SwiftUI，以及配套的响应式编程框架 Combine。对于
                              Apple
                              平台的开发者来说，这是一次全新的转变和挑战。本书通过几个具体的实战例子，由浅入深介绍了
                              SwiftUI 和 Combine 框架的使用方式及核心思想，帮助您顺利步入令人激动的 Apple 开发新时代。
                            </div>
                            <div className="books-item-avatar">
                              <Avatar
                                size={20}
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                              />
                              <span> 郭富城</span>
                            </div>
                            <div className="books-item-read">
                              <Button type="danger" shape="round">
                                阅读
                              </Button>
                            </div>
                            <div className="books-item-price">
                              <span>¥ 19.9</span>
                              <span>14 章节 · 222 人购买</span>
                            </div>
                          </div>
                        </li>
                      </Link>
                    </Fragment>
                  );
                })}
              </ul>
            </div>
          </div>
        </div>
      </Layout>
    );
  }
}

export default Books;
